<template>
    <el-tabs v-model="activeName">
      <el-tab-pane :label="channel1.name" name="first">
        <!-- 新闻咨询的有序列表-->
        <ul class="list-content-block">
          <li v-for="(item,index) in articles1">
            <!--咨询标题（超链接）-->
            <router-link :to="`/front/newDetail/${item.id}`" target="_blank">
              <span>{{item.title}}</span>
            </router-link>
            <span class="after"><i class="el-icon-alarm-clock"></i>{{item.created | showDate}}</span>
            <!--咨询标题（超链接）-->
          </li>
        </ul>
        <!-- 新闻咨询的有序列表-->
      </el-tab-pane>

      <el-tab-pane :label="channel2.name" name="second">
        <!-- 新闻咨询的有序列表-->
        <ul class="list-content-block">
          <li v-for="(item,index) in articles2">
            <!--咨询标题（超链接）-->
            <router-link :to="`/front/newDetail/${item.id}`" target="_blank">
              <span>{{item.title}}</span>
            </router-link>
            <span class="after"><i class="el-icon-alarm-clock"></i>{{item.created | showDate}}</span>
            <!--咨询标题（超链接）-->
          </li>
        </ul>
        <!-- 新闻咨询的有序列表-->
      </el-tab-pane>


      <el-tab-pane :label="channel3.name" name="third">
        <!-- 新闻咨询的有序列表-->
        <ul class="list-content-block">
          <li v-for="(item,index) in articles3">
            <!--咨询标题（超链接）-->
            <router-link :to="`//front/newDetail/${item.id}`" target="_blank">
              <span>{{item.title}}</span>
            </router-link>
            <span class="after"><i class="el-icon-alarm-clock"></i>{{item.created | showDate}}</span>
            <!--咨询标题（超链接）-->
          </li>
        </ul>
        <!-- 新闻咨询的有序列表-->
      </el-tab-pane>


    </el-tabs>
</template>

<script>
    import {formatDate} from "@/utils/date";
    import {findListByChannelId} from '@/api/article';
    export default {
        name: "RTab",
        props:['channelIds'],
        data(){
            return {
                activeName:'first',
                channel1:{},//选项卡标题文字1
                channel2:{},//选项卡标题文字2
                channel3:{},//选项卡标题文字3
                articles1:[],//选项1下方文章
                articles2:[],//选项卡2下方文章
                articles3:[],//选项卡3下方文章
            }
        },
       mounted() {
        this.findChannelAndArticle1();
        this.findChannelAndArticle2();
        this.findChannelAndArticle3();
      },
        methods:{

         //选项卡1
        findChannelAndArticle1(){
          findListByChannelId(this.channelIds[0]).then(res=>{
            this.articles1 = res.data.articleList;
            this.channel1 = res.data.channel;
          })
        },

        //选项卡2
        findChannelAndArticle2(){
          findListByChannelId(this.channelIds[1]).then(res=>{
            this.articles2 = res.data.articleList;
            this.channel2 = res.data.channel;
          })
        },

        //选项卡3
        findChannelAndArticle3(){
          findListByChannelId(this.channelIds[1]).then(res=>{
            this.articles3 = res.data.articleList;
            this.channel3 = res.data.channel;
          })
        },

      },
      filters: {
        showDate(value) {
          const date = new Date(value);
          return formatDate(date, "yyyy-MM-dd");
        }
      }


    }
</script>

<style scoped>

</style>
